<template>
  <el-card class="box-card defaultTable">
    <el-table v-loading="loading" :data="d.tableData" style="width: 100%">
      <!-- <el-table-column prop="label" label="头像">
        <template #default="scope">
          <Avatar :avatar="String(scope.row.admin_avatar)" :icon-size="50" />
        </template>
      </el-table-column> -->
      <el-table-column prop="robot_nickname" label="robot_nickname" />
      <el-table-column prop="question" label="question" width="400" />
      <el-table-column prop="model_name" label="model_name" />
      <!-- <el-table-column prop="voice_style" label="次数" /> -->
      <el-table-column prop="createtime" label="创建时间" />
      <el-table-column type="expand" width="80" align="right" label="聊天内容">
        <template #default="props">
          <div class="mdiText" m="4">
            <div v-html="getMdiText(props.row.answer)" />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="justify-content-end p10_0"
      :layout="paginationData.layout"
      :page-sizes="paginationData.pageSizes"
      :total="paginationData.total"
      :page-size="paginationData.pageSize"
      :currentPage="paginationData.currentPage"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { APITokenRobotList } from "@/api/apiSetting"
// import Avatar from '@/components/Avatar/index.vue';
import useMarkdown from "@/hooks/useMarkdown/useMarkdown"
import { usePagination } from "@/hooks/usePagination"
import dayjs from "dayjs"
import { onMounted, reactive, ref, watch } from "vue"

const { getMdiText } = useMarkdown()

const loading = ref<boolean>(false)

const d = reactive<any>({
  tableData: [],
  paginationData: {
    total: 0,
    currentPage: 1,
    pageSize: 20
  }
})

const { paginationData, handleCurrentChange } = usePagination(d.paginationData)
// 监听分页
watch(
  () => paginationData.currentPage,
  () => {
    initModel()
  }
)

// 初始化
const initModel = async () => {
  loading.value = true
  const params = {
    page: paginationData.currentPage
  }
  const { data, code } = await APITokenRobotList(params)
  if (code !== 200) return
  paginationData.total = data.count
  d.tableData = data.list.map((item: any) => {
    item.createtime = dayjs.unix(item.createtime).format("YYYY-MM-DD HH:mm:ss")
    return item
  })
  loading.value = false
}

onMounted(() => {
  initModel()
})

const delFn = (p: number) => {
  const newList = d.tableData.filter((e) => e.id !== p)
  d.tableData = newList
}
</script>
<style lang="scss" scoped>
.el-card {
  box-shadow: none;
  border: none;

  // :deep(.el-table__expand-icon) {
  //   text-align: right;
  // }

  // :deep(.is-right>.cell) {
  //   text-align: right;

  // }

  .mdiText {
    // margin: 5px;
    padding: 5px 20px;
    border-radius: 10px;
    background: #f9f9f9;
  }
}
</style>
